<template>
  <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-divider orientation="left"> 设置提交表单的文案和操作 </a-divider>
    <a-form-model-item label="提交按钮">
      <div class="con">
        <div class="btnCon">
          <a-popover placement="bottomLeft" :visible="submitNameVisible">
            <template slot="content">
              <a-input
                v-model="options.submitButtonName"
                placeholder="请输入按钮名称"
                >提交</a-input
              >
            </template>
            <template slot="title">
              <div class="flex align-center justify-between">
                <span>按钮名称</span>
                <a-button
                  type="link"
                  @click="submitNameVisible = false"
                  style="padding: 0"
                  >关闭</a-button
                >
              </div>
            </template>
            <a-button type="primary" @click="submitNameVisible = true">{{
              options.submitButtonName
            }}</a-button>
          </a-popover>

          <a-tooltip title="修改按钮名称">
            <a-icon
              type="edit"
              @click="submitNameVisible = true"
              class="margin-left"
            ></a-icon>
          </a-tooltip>
        </div>
        <span class="flex"
          >提交后：
          <a-dropdown>
            <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
              {{
                options.submitAfter == 1
                  ? "关闭弹窗"
                  : options.submitAfter == 2
                  ? "继续创建下一条"
                  : "打开刚刚创建的记录"
              }}
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay" @click="submitAfterClick">
              <a-menu-item :key="1"> 关闭弹窗 </a-menu-item>
              <a-menu-item :key="2"> 继续创建下一条 </a-menu-item>
              <a-menu-item :key="3"> 打开刚刚创建的记录 </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </div>
    </a-form-model-item>

    <a-form-model-item label="继续创建">
      <div class="con">
        <div class="btnCon">
          <a-popover
            placement="bottomLeft"
            :visible="submitContinueNameVisible"
          >
            <template slot="content">
              <a-input
                v-model="options.submitContinueButtonName"
                placeholder="请输入按钮名称"
              ></a-input>
            </template>
            <template slot="title">
              <div class="flex align-center justify-between">
                <span>按钮名称</span>
                <a-button
                  type="link"
                  @click="submitContinueNameVisible = false"
                  style="padding: 0"
                  >关闭</a-button
                >
              </div>
            </template>
            <a-button @click="submitContinueNameVisible = true">{{
              options.submitContinueButtonName
            }}</a-button>
          </a-popover>
          <a-tooltip title="修改按钮名称">
            <a-icon
              type="edit"
              @click="submitContinueNameVisible = true"
              class="margin-left"
            ></a-icon>
          </a-tooltip>
        </div>
        <span class="flex"
          >提交后：
          <a-dropdown>
            <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
              {{
                options.submitContinueAfter == 1
                  ? "关闭弹窗"
                  : options.submitContinueAfter == 2
                  ? "继续创建下一条"
                  : "打开刚刚创建的记录"
              }}
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay" @click="submitContinueAfterClick">
              <a-menu-item :key="1"> 关闭弹窗 </a-menu-item>
              <a-menu-item :key="2"> 继续创建下一条 </a-menu-item>
              <a-menu-item :key="3"> 打开刚刚创建的记录 </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
        <a-switch v-model="options.submitContinue" />
      </div>
    </a-form-model-item>

    <a-form-model-item
      label="存草稿"
      extra="在表单中显示存草稿按钮，草稿数据在下次打开时可以继续编辑并提交"
    >
      <a-switch v-model="options.saveDraft" />
    </a-form-model-item>

    <a-form-model-item
      label="继续创建"
      extra="启用后，在连续创建数据时可以自动填充上次提交的内容，减少重复输入"
    >
      <a-checkbox v-model="options.submitContinueSaveData">
        继续创建,保留本次提交内容
      </a-checkbox>
      <div v-if="options.submitContinueSaveData">
        <a-select v-model="options.submitContinueSaveDataType">
          <a-select-option :value="1">保留所有提交内容</a-select-option>
          <a-select-option :value="2">保留指定字段</a-select-option>
        </a-select>
        <a-select
          v-if="options.submitContinueSaveDataType == 2"
          v-model="options.submitContinueSaveDataTypeCustom"
          mode="multiple"
          placeholder="请选择保留字段"
        >
          <a-select-option v-for="item in columns" :key="item.key">{{
            item.label
          }}</a-select-option>
        </a-select>
        <div>
          <div>保留方式</div>
          <a-radio-group
            button-style="solid"
            v-model="options.submitContinueSaveDataTip"
          >
            <a-radio :value="1" :style="radioStyle">
              显示“保留上次提交内容”选项，由用户决定是否保留
            </a-radio>
            <a-radio :value="2" :style="radioStyle">
              无需询问，自动保留
            </a-radio>
          </a-radio-group>
        </div>
      </div>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
      },

      submitNameVisible: false, //提交按钮修改名称显示
      submitContinueNameVisible: false,
    };
  },
  props: {
    options: {
      type: Object,
    },
    columns: {
      type: Array,
    },
  },
  methods: {
    submitContinueAfterClick(event) {
      this.options.submitContinueAfter = event.key;
    },

    submitAfterClick(event) {
      this.options.submitAfter = event.key;
    },
  },
};
</script>
<style scoped>
.con {
  width: 100%;
  padding: 14px 16px;
  background: rgb(255, 255, 255);
  border-radius: 8px;
  border: 1px solid rgb(234, 234, 234);
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.con .btnCon {
  width: 180px;
  margin-right: 34px;
}
.flex {
  flex: 1;
}
</style>
